<template>
	<view>
		<view class="search-history" v-if="!isReady">
			<view class="title-block">
				<view class="title">搜索历史</view>
				<view class="all-search-block">
					<view class="search-icon iconfont icon-gengduo1"></view>
					<view class="text">全部</view>
				</view>
			</view>
			<view class="content">
				<block v-for="(item, index) in historyData" :key="index">
					<view class="search-history-item" @click="searchFun(item)">{{item}}</view>
				</block>
			</view>
			<view class="clear-search iconfont icon-lajitong" @click="clearHistroy">
				清空历史搜索记录
			</view>
		</view>
		<view class = "content" v-else>
			<scroll-view  scroll-y class="list" :style="{'height':swiperHeight+'px'}"
			refresher-enabled
			:refresher-threshold="100"
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
			@scrolltolower="scrolltolower"
			:lower-threshold="100"	>
				<view>
					<block v-for="(item, index) in GraphicList" :key= "index">
						<graphic-item :graphic="item" class="graphic-item" 
						@clickAttention="clickAttention(item.uid)" 
						@clickInput="clickInput"
						:dataIndex="index"
						@clickComment="clickComment"
						@contentClick="contentClick"
						@forwardFun="forwardFun(item.id)"
						@likeFun="likeFun"></graphic-item>
					</block>
				</view>
				<view class="graphic-list-content"  v-if="GraphicList.length == 0 && isReady">
					<view class="content-none flex-ali-center flex-juscon-center" :style="{'height': noneWrap + 'px'}">
						<view class="none-hit">
							<image class="content-none-img" src="../../static/imgs/none.png" mode="widthFix"/>
							<view class="content-none-text">好像被外星人掳走了~</view>
						</view>
					</view>
				</view>
				<view class="bottom-loading" v-if="GraphicList.length > 0 ">{{bottomLoading}}</view>
			</scroll-view>
			<!-- 弹出提示框 -->
			<uni-popup ref="popup" type="center" animation @change="popuChange">
				<view class="popup-content">
					<view class="popup-title">转发</view>
					<view class="popu-prompt">确定转发此条趣事？</view>
					<view class="popu-butons">
						<view class="cancel-btn" @click="cancelPopu">取消</view>
						<view class="confirm-btn" @click="confirmPopu">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 弹出提示框 -->
		<uni-popup ref="popupClear" type="center" animation @change="popuChange">
			<view class="popup-content-clear">
				<view class="popup-title">删除</view>
				<view class="popu-prompt">确定要删除所有搜索历史记录？</view>
				<view class="popu-butons">
					<view class="cancel-btn" @click="cancelPopuClear">取消</view>
					<view class="confirm-btn" @click="confirmPopuClear">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import GraphicItem from '@/components/funScrollView/Graphic-item.vue';
	import {TheFun} from '@/model/theFun.js';
	import {User} from '@/model/user.js';
	export default {
		data() {
			return {
				GraphicList:[],
				noneWrap:500,
				swiperHeight:500,
				triggered: false,
				bottomLoading:"上拉加载更多！",
				isReady:false,
				likeClick:false,
				funId:0,
				historyData:[],
				searchValue:'',
				page:1
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				// TODO 取消
			}
		},
		onNavigationBarSearchInputConfirmed(e) {
			// TODO 点击搜索
			if(!e.text){
				return
			}
			console.log(e)
			this.searchValue = e.text
			this.historyData.push(this.searchValue)
			this.getFunList(this.searchValue)
		},
		components:{
			GraphicItem
		},
		async onLoad() {
			let res = uni.getSystemInfoSync();
			this.noneWrap = res.windowHeight - uni.upx2px(100)
			this.swiperHeight = res.windowHeight- uni.upx2px(20)
			this.historyData =  this.$utils.getStorage('historyData') || []
			
		},
		onUnload() {
			this.$utils.setStorage('historyData',this.historyData)
		},
		onShow() {
			uni.$on("refreshDynamic", async e=>{
				let dataIndex = this.GraphicList.findIndex(item=>item.id == e.dataId)
				console.log(dataIndex)
				let res = await TheFun.getFunDetail({funId:e.dataId})
				this.GraphicList[dataIndex].isClick = res.data.isClick
				this.GraphicList[dataIndex].likeNum = res.data.likeNum
				this.GraphicList[dataIndex].commentNum = res.data.commentNum
				this.GraphicList[dataIndex].forwardNum = res.data.forwardNum
				console.log(this.GraphicList)
			})
		},
		methods:{
			async getFunList(keyWord){
				uni.showLoading({
					title:"加载中..."
				})
				let funRes = await TheFun.searchFun({keyWord:keyWord})
				this.page = 1;
				if(funRes.code != 200){
					uni.showToast({
						icon:'none',
					    title: funRes.message,
					    duration: 2000
					});
					return
				}
				this.isReady = true
				this.GraphicList = funRes.data.data
				if(this.page * 15 < funRes.data.count){
					this.isNoData = false
				}else{
					this.isNoData = true
					this.bottomLoading = "我也是有底线的...."
				}
			},
			async searchFun(keyWord){
				this.searchValue = keyWord
				let webview = this.$mp.page.$getAppWebview();
				webview.setTitleNViewSearchInputText(keyWord)
				this.getFunList(keyWord)
			},
			async onRefresh() {
				if (this._freshing) return;  
				this._freshing = true;  
				if (!this.triggered)//界面下拉触发，triggered可能不是true，要设为true  
					this.triggered = true;
				this.bottomLoading = "上拉加载更多"
				this.isNoData = false
				this.page = 1;
				let funRes = await TheFun.searchFun({keyWord:this.searchValue})
				if(funRes.code != 200){
					this.hideRefresh()
					uni.showToast({
						icon:'none',
					    title: funRes.message,
					    duration: 2000
					});
					return
				}
				this.GraphicList = funRes.data.data
				if(this.page * 15 < funRes.data.count){
					this.isNoData = false
				}else{
					this.isNoData = true
					this.bottomLoading = "我也是有底线的...."
				}
				this.hideRefresh()
			},
			hideRefresh(){
				setTimeout(() => {
					this.triggered = false;//触发onRestore，并关闭刷新图标  
					this._freshing = false;
				}, 500)  
			},
			async scrolltolower(){
				// console.log(this.isNoData || this.isLoading)
				if (this.isLoading || this.isNoData) return;
				this.isLoading = true;  
				this.bottomLoading = "加载中..."
				this.page += 1
				let funRes = await TheFun.searchFun({page:this.page,keyWord:this.searchValue})
				if(funRes.code != 200){
					this.hideRefresh()
					uni.showToast({
						icon:'none',
					    title: funRes.message,
					    duration: 2000
					});
					return
				}
				this.GraphicList.push(...funRes.data.data)
				if(this.page * 15 < funRes.data.count){
					this.isNoData = false
				}else{
					this.isNoData = true
					this.bottomLoading = "我也是有底线的...."
				}
				// this.$emit("scrolltolower",this.tagIndex)
				console.log("触底")
				this.doenTolower()
			},
			doenTolower(){
				this.isLoading = false;
			},
			tolowerNoData(){
				this.isLoading = false;
				this.isNoData = true
				this.bottomLoading = "我也是有底线的...."
			},
			async forwardFun(id){
				this.$refs.popup.open()
				this.funId = id
			},
			clickInput(e){
				// this.$emit("clickInput",{...e})
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id })
					}
				})
			},
			contentClick(e){
				// this.$emit('contentClick', this.graphic)
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id })
					}
				})
			},
			clickVideo(e){
				// this.$emit('clickVideo', this.graphic)
				uni.$on("getVideoInfo",c=>{
					c.fun(e)
				})
				uni.navigateTo({
					url:'../../pages/detailVideo/detailVideo',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { graphic: e })
					}
				})
			},
			clickAvatr(e){
				// this.$emit("clickAvatr",this.graphic)
			},
			async clickAttention(uid){
				// this.$emit('clickAttention',this.graphic.uid)
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await User.attentionUser({uid:uid})
				uni.hideLoading()
				if(res.code != 200 ){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return 
				}
				uni.showToast({
					icon:'none',
				    title: "关注成功",
				    duration: 2000
				});
				this.GraphicList.forEach(item=>{
					if(item.uid == uid){
						item.isAttention = true
					}
				})
				this.$store.contentViewList.forEach(item=>{
					if(item.funSharePageResult){
						item.funSharePageResult.data.forEach(graphic=>{
							if(graphic.uid == uid){
								graphic.isAttention = true
							}
						})
					}
				})
			},
			clickComment(e){
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id})
					}
				})
			},
			async likeFun(e){
				// this.$emit("likeFun",{
				// 	data:this.graphic,
				// 	index:this.pageIndex,
				// 	dataIndex:this.dataIndex
				// })
				if(this.likeClick)
					return
				this.likeClick = true
				if(e.data.isClick){
					let res = await TheFun.likeFun({
						id:e.data.id,
						clickType:2,
						funOrTopic:1
					})
					this.likeClick = false
					if(res.code == 200){
						this.GraphicList[e.dataIndex].isClick = false
						this.GraphicList[e.dataIndex].likeNum -= 1
						return
					}
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				let res = await TheFun.likeFun({
					id:e.data.id,
					clickType:1,
					funOrTopic:1
				})
				this.likeClick = false
				if(res.code == 200){
					this.GraphicList[e.dataIndex].isClick = true
					this.GraphicList[e.dataIndex].likeNum += 1
					return
				}
				uni.showToast({
					icon:'none',
				    title: res.message,
				    duration: 2000
				});
			},
			toggle() {
				this.$refs.popup.open()
			},
			hiddenpopup(e){
				this.$refs.popup.showPopup = false
			},
			cancelPopu(){
				this.hiddenpopup()
			},
			popuChange(e){
				console.log(e)
			},
			async confirmPopu(){
				this.hiddenpopup()
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let res = await TheFun.forwardFun({funId:this.funId})
				
				// console.log(res)
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return 
				}
				uni.showToast({
					icon:'none',
				    title: "转发成功",
				    duration: 2000
				});
			},
			clearHistroy(){
				this.$refs.popupClear.open()
			},
			confirmPopuClear(){
				this.$utils.removeStorage("historyData")
				this.historyData = []
				this.$refs.popupClear.showPopup = false
			},
			cancelPopuClear(){
				this.$refs.popupClear.showPopup = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-history{
		margin: 20rpx;
		.title-block{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			.title{
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				letter-spacing: 5rpx;
			}
			.all-search-block{
				color: #888;
				display: flex;
				align-items: center;
				.search-icon{
					padding: 0 20rpx;
					transform: rotateZ(90deg);
				}
				.text{
					font-size: 24rpx;
				}
			}
			
		}
		.content{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;
			max-height: 400rpx;
			overflow: auto;
			.search-history-item{
				margin: 10rpx 20rpx;
				max-width: 250rpx;
				padding: 20rpx 10rpx;
				line-height: 1;
				font-size: 25rpx;
				background-color: #F2F2F2;
				border-radius: 10rpx;
				
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
		}
		.clear-search{
			width: 300rpx;
			margin: 30rpx auto;
			color: #888888;
			text-align: center;
			font-size: 28rpx;
		}
	}
	.popup-content-clear{
		.popup-title{
			color: red !important;
		}
		.popu-butons{
			.confirm-btn{
				background-color: red !important;
				color: #FFF;
			}
		}
	}
.popup-content,.popup-content-clear{
		background-color: #FFF;
		width: 500rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.popup-title{
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: $fun-theme-color;
			border-bottom: 1rpx #F2F2F2 solid;
		}
		.popu-prompt{
			font-size: 30rpx;
			color: #666666;
			padding: 20rpx 40rpx;
		}
		.popu-butons{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.confirm-btn{
				background-color: $fun-theme-color;
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom-right-radius: 20rpx;
			}
			.cancel-btn{
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom-left-radius: 20rpx;
			}
		}
	}
	.content{
		box-sizing: border-box;
		padding: 10rpx;
		.graphic-item{
			margin-bottom: 20rpx;
		}
	}
	.graphic-list-content{
		
		.content-none{
			width: 100vw;
			.none-hit{
				margin-top: -100rpx;
				.content-none-img{
					width: 400rpx;
				}
				.content-none-text{
					text-align: center;
					color: #999999;
					font-size: 14rpx;
				}
			}
		}
	}
	.bottom-loading{
		margin: 15rpx;
		font-size: 26rpx;
		text-align: center;
		color: #999;
	}
</style>
